<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript"
			src="<s:url value="/js/jquery-1.3.2.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-1.7.2.custom.min.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.scrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.Hscrollfollow.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery-ui-Draggable.1.7.1.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.blockUI.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.bgiframe.min.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.ajaxQueue.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/thickbox-compressed.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.autocomplete.js"/>"></script>
		<link rel="stylesheet" type="text/css"
			href="<s:url value="/js/autocomplete/jquery.autocomplete.css"/>" />
		<link rel="stylesheet" type="text/css"
			href="<s:url value="/js/autocomplete/thickbox.css"/>" />
		<script type="text/javascript">
		function doSelect(tdid,date,time,teacherid,teacher) {
		    var td=$('#divid').attr('value'); //上次选到的
		    //alert(td);
		    if (td){ //不是空的    
		         $("#"+td).attr("bgcolor","");
		    } 
		    $("#divid").val(tdid);
		    $("#seldate").val(date) ;
		    $("#seltime").val(time);
		    $("#selteacherid").val(teacherid);
		    $("#selteacher").val(teacher);
		    $("#"+tdid).attr("bgcolor","#7CFC00");
	        //alert(entityid);
       	    var url = "<s:url value="/academic/ClassArrange/selectArrange.action"/>";
            var params = {
                date:date,
		        time:time,
		        teacherid:teacherid
            };
            jQuery.post(url, params, callbackFun);
 		    
	    };
 	    function doSave()
         {    
             if (!$("#seldate").attr('value')
                 ||!$("#seltime").attr('value')
                 ||!$("#selteacherid").attr('value')
                 ||!$("#classtypeid").attr('value')
                 ||!$("#classfocusid").attr('value')
                 ||!$("#classroomid").attr('value')){
                 alert("please full the all info");
                 return;
             }
             $.blockUI({ css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: .5, 
                    color: '#fff' 
                } });  
             var url = "<s:url value="/academic/ClassArrange/doArrange.action"/>";
             var params = {
                date:$("#seldate").attr('value'),
		        time:$("#seltime").attr('value'),
		        teacherid:$("#selteacherid").attr('value'),
		        classtypeid:$("#classtypeid").attr('value'),
		        classfocusid:$("#classfocusid").attr('value'),
		        classroomid:$("#classroomid").attr('value'),
		        topic:$("#topic").attr('value')
             };
             jQuery.post(url, params, callbackFun);
          };
          
          function doDelete()
         {    
             var entityid=$("#entityid").attr('value');
             if (!entityid){
                 alert("please click one class!");
                 return;
             }
             if(!confirm('are you sure delete this class ?')){
		         return;
	         }
             $.blockUI({ css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: .5, 
                    color: '#fff' 
                } });  
             var url = "<s:url value="/academic/ClassArrange/deleteArrange.action"/>";
             var params = {
                entityid:$("#entityid").attr('value'),
             };
             jQuery.post(url, params, callbackFun);
          };
          
         function callbackFun(data)
         {
              setTimeout($.unblockUI, 50); 
              $(data).find('response').each(function(){
                  var err=$(this).children("errorinfo").text();
                  if (err){
                      alert(err);
                      return;
                  }
                  $("#entityid").val($(this).children("entityid").text() );　
                  $("#classtype").val($(this).children("type").text() );　　　　　　　　　　　　　　　　　　
　 　　　　　　　       $("#classtypeid").val($(this).children("typeid").text() );
                  $("#classfocus").val($(this).children("focus").text() );
		          $("#classfocusid").val($(this).children("focusid").text() );
		          $("#classroom").val($(this).children("room").text() );
		          $("#classroomid").val($(this).children("roomid").text() );
		          $("#topic").val($(this).children("topic").text());
		          $("#selentityinfo").val($(this).children("info").text());
		          var td=$('#divid').attr('value'); //上次选到的
		   		  if (td){ //不是空的    
		              $("#"+td).html($(this).children("info").text());
		           } 
       　　　　　　 });
 　　　      };
	    $().ready( function ()
		 {
			   $( '#topdiv' ).scrollFollow(
					{
						speed: 1,
						offset:0 
					}
				);
				$( '#leftdiv' ).HscrollFollow(
					{
						speed: 1,
						offset:0 
					}
				);
				$('#floatdiv').draggable();
 	 	 
             $("#classtype").autocomplete("<s:url value="/data/ClassType/autoCompleteAjax.action"/>", {
              width: 260,
              minChars:1, //几个字
              selectFirst: false,
              max:  20,
           	  formatItem: function(row, i, max) {
           	      var d=eval("("+row+")");
           	      return i + "/" + max + ":" +  d.name;
	         },
		     formatResult: function(row) {
		         var d=eval("("+row+")");
			     return d.name;
     	      }
           }
           );
           	$("#classtype").result(function(event, data, formatted) {
           	      var d=eval("("+data+")");
		          $("#classtypeid").val(d.id);
		          $("#classfocus").val("");
		          $("#classfocusid").val("");
		          $("#topic").val("");
		          $("#classfocus").flushCache();
		          $("#classfocus").focus();
	        });
            $("#classfocus").autocomplete("<s:url value="/data/ClassFocus/autoCompleteAjax.action"/>", {
              width: 260,
              minChars:1, //几个字
              selectFirst: false,
              max:  20,
              extraParams: {
                  classtypeid: function() { return $("#classtypeid").val(); }
               },
              formatItem: function(row, i, max) {
           	      var d=eval("("+row+")");
         	      return  d.name+" type:"+ d.type+ " level:"+ d.level;
	         },
		     formatMatch: function(row, i, max) {
		        var d=eval("("+row+")");
 			    return d.name;
		     },
		     formatResult: function(row) {
		        // alert(row);
		         var d=eval("("+row+")");
			     return d.name;
     	      }
           }
           );
           	$("#classfocus").result(function(event, data, formatted) {
           	      var d=eval("("+data+")");
		          $("#classfocusid").val(d.id);
		          $("#topic").val(d.topic);
		          $("#classroom").focus();
           });
           $("#classroom").autocomplete("<s:url value="/data/Classroom/autoCompleteAjax.action"/>", {
              width: 260,
              minChars:1, //几个字
              selectFirst: false,
              max:  20,
           	  formatItem: function(row, i, max) {
           	      //alert(row);
           	      var d=eval("("+row+")");
           	      //alert(d);
			      return  d.name+" capacity:"+ d.capacity;
	         },
		     formatMatch: function(row, i, max) {
		        var d=eval("("+row+")");
 			    return d.name;
		     },
		     formatResult: function(row) {
		        // alert(row);
		         var d=eval("("+row+")");
			     return d.name;
     	      }
           }
           );
           	$("#classroom").result(function(event, data, formatted) {
           	      var d=eval("("+data+")");
		          $("#classroomid").val(d.id);
           });
         });
</script>
		<style type="text/css">
#tdwithtooltip {
	cursor: pointer;
}

#simpleTooltip {
	padding: 7px;
	border: 1px solid #A6A7AB;
	background: #F2F3F5;
}

#topdiv {
	position: absolute;
	z-index: 2;
	width: <s:property value ="teachers.size()*100+280"/>px;
	height: 30px;
	background-color: #00FFFF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#leftdiv {
	position: absolute;
	top: 40px;
	z-index: 1;
	margin: 0px;
	width: 178px;
	background-color: #00FFFF;
	padding: 0px 0px 0px 0px;
	border: 0px solid #42CBDC;
}

#floatdiv {
	position: fixed;
	left: 400px;
	top: 100px;
	z-index: 3;
	width: 500 px;
	background-color: #FFFFFF;
	margin: 2px 2px 2px 2px;
	padding: 2px 2px 2px 2px;
	border: 6px solid #42CBDC;
	z-index: 3;
}

#bookingtable {
	position: relative;
	top: 34px;
	z-index: 0;
	background-color: #EBEBEB;
}
</style>
		<title><s:text name="system.title" />
		</title>
	</head>
	<body>
		<div id="floatdiv">
			<table>
				<tr>
					<td colspan="3">
						<fieldset>
							<legend style="border-collapse: 3;border-spacing: 4">
								Select Info: <input id="selentityinfo" type="text" readonly="readonly" style="border-width: 0" />
							</legend>
							<input id="entityid" type="hidden"  />
							<input id="divid" type="hidden"   />
							<label>
								Date:
								<input id="seldate" type="text" size="10" readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0" />
							</label>
						    <label>
								Time:
								<input id="seltime" type="text" size="15" readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0" />
							</label>
							<br />
							<label>
								Teacher:
								<input id="selteacher" type="text" size="15" readonly="readonly" style="border-color:black; border-bottom: 2;border-left: 0;border-right: 0;border-top:0" />
								<input id="selteacherid"  name="selteacherid"  type="hidden"  />
							</label>
							<label>
								Classroom:
								<input type="text" id="classroom"   value="" style="width: 100px;" />
								<input id="classroomid"  name="classroomid"  type="hidden"  />
				 			</label>
							<br />
					     	<label>
								ClassType:
								<input type="text" id="classtype"   value="" style="width: 100px;" />
								<input id="classtypeid"  name="classtypeid"  type="hidden"  />
							</label>
							<label>
								ClassFocus:
								<input type="text" id="classfocus" value=""  
									style="width: 100px;" />
			    				<input id="classfocusid"  name="classfocusid"  type="hidden"  />
							</label>
							<br />
							<label>
								Topic:
							<input type="text" size="50" value="" name="topic" id="topic" />
							</label>
						</fieldset>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="SAVE"
							onclick="javascript:doSave();" />
				    	<input type="button" value="DELETE" 
                            onclick="javascript:doDelete();" />
					</td>
					<td>
						<input type="button" value="CLOSE WINDOW"
							onclick="window.close();" />
					</td>
				</tr>
			</table>
		</div>
		<div id="topdiv">
			<s:form action="beforeBooking" method="post">
				<table border="1" bordercolor="black"
					width="<s:property value="teachers.size()*100+169" />"
					style="table-layout: fixed;">
					<s:hidden name="id" />
					<tr height="28px">
						<th width="169"  >
							Year:
							<s:property value="year" />
							&nbsp; Week:
							<s:property value="week" />
						</th>
						<s:iterator value="teachers">
							<th width="100"  >
								<s:property value="name" />
							</th>
						</s:iterator>
					</tr>
				</table>
			</s:form>
		</div>
		<div id="leftdiv">
			<table width="180" border="1">
				<s:iterator value="days" status="st">
					<tr>
						<s:if test="#st.index%10==0">
							<td rowspan="10" bgcolor="#FFFFFF" width="80"
								style="word-wrap: break-word; word-break: break-all;">
								<s:set name="bday" />
								<s:date name="bday" format="E" />
								<br />
								<s:date name="bday" format="yyyy-MM-dd" />
							</td>
						</s:if>
						<td bgcolor="#FFFFFF" width="80">
							<s:property value="timeline.get(#st.index%10)" />
						</td>
					</tr>
				</s:iterator>
			</table>
		</div>
		<%
			int i = 1;
		%>
		<table id="bookingtable" bordercolor="black"
			width="<s:property value="teachers.size()*100+180" />"
			style="table-layout: fixed;" border="1">
			<s:iterator value="days" status="st">
				<tr>
					<s:if test="#st.index%10==0">
						<s:set name="bday"/>
					</s:if>
					<s:set name="btime" value="timeline.get(#st.index%10)" />
					<td width="167px">
					</td>
					<s:iterator value="teachers">
						<td align="center" width="100" id="<%=i%>" 
	    					onclick="javescript:doSelect(<%=i++%>,
	       					'<s:date name="bday" format="yyyy-MM-dd" />',
	    					'<s:property value="%{#btime}"/>',
	    					'<s:property value="%{id}"/>',
	    					'<s:property value="%{name}"/>');">
							 <s:property
								value="getClassEntityInfo(#bday,#btime,id)" />
							&nbsp;
						</td>
					</s:iterator>
				</tr>
			</s:iterator>
		</table>
	</body>
</html>